<template>
  <div class="city">
    <van-popup v-model="popupFlag" class="popup">
      <div>请选择城市</div>
      <button @click="popupFlag=false">确定</button>
    </van-popup>
    <div class="city-top-bar">
      <van-sticky>
        <van-nav-bar title="当前城市-" left-arrow @click-left="onClickLeft" />
        <form action="/">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @input="onInput"
            @cancel="onCancel"
          />
        </form>
      </van-sticky>
    </div>
    <div class="city-content" v-show="show">
      <div class="hot-city-title">gps定位城市失败</div>
      <div class="hot-city">
        <div class="hot-city-name">定位失败</div>
      </div>
      <div class="hot-city-title">热门城市</div>
      <div class="hot-city">
        <div class="hot-city-name" v-for="item in hotCity" :key="item.name" @click="goCity(item)">
          {{ item.name }}
        </div>
      </div>

      <van-index-bar :index-list="indexList">
        <div v-for="(item, index) in filterList" :key="index">
          <van-index-anchor :index="item.index" />
          <van-cell
            :title="subitem.name"
            @click="goCity(subitem)"
            :key="index"
            v-for="(subitem, index) in item.list"
          />
        </div>
      </van-index-bar>
    </div>
    <div class="search-city" v-show="!show">
      <div v-for="city in searchList" :key="city.cityId" class="search-city-item" @click="goCity(city)">{{ city.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cityLocation",
  data() {
    return {
      popupFlag:false,
      // 返回城市列表原始数据
      cityList: [],

      // 过滤后的数据
      filterList: [],
      // 城市的索引
      indexList: [],

      // 搜索框的内容过滤的数据
      searchList: [],
      // 定义一个标志位控制下方列表的显示
      show: true,
      // input输入框双向绑定的内容
      value: "",
      // 定义定时器
      clearTime:null,
    };
  },
  computed: {
    hotCity() {
      return this.cityList.filter((item) => item.isHot);
    },
  },

  created() {
    let that = this;
    this.axios
      .get(process.env.VUE_APP_BASE_URL, {
        headers: {
          "X-Host": "mall.film-ticket.city.list",
        },
        params: {
          k: 9182899,
        },
      })
      .then((res) => {
        that.cityList = res.data.data.cities;
        // 进行调用filterCityList
        that.filterCityList(res.data.data.cities);
      })
      .catch((error) => {
        console.log(error);
      });
  },
  mounted() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
  },

  methods: {
    goCity(city) {
      // 获取的城市状态放入状态管理器中
      this.$store.commit("passOnCity", city);
      this.$router.push({
        name: "film",
      });
    },
    filterCityList(cities) {
      let letterArr = [];
      for (let i = 65; i < 91; i++) {
        letterArr.push(String.fromCharCode(i));
      }

      for (let j = 0; j < letterArr.length; j++) {
        //1. 筛选出每个字母对应的城市列表，放入tempArr中
        let tempArr = this.cityList.filter(
          (item) => item.pinyin.substring(0, 1).toUpperCase() === letterArr[j]
        );
        //2. 判断tempArr中是否为空，说明对应的字母没有城市
        if (tempArr.length !== 0) {
          this.filterList.push({
            index: letterArr[j],
            list: tempArr,
          });
          // 3.indexList放入索引
          this.indexList.push(letterArr[j]);
        }
      }
    },
    onClickLeft() {
      // this.$router.back();
      this.popupFlag=true;
    },
    onInput(val) {
      let that =this;
      // 加入500ms防抖时间
      if (this.clearTimer) {
        clearTimeout(this.clearTimer);
        this.clearTimer = null;
        that.show=true;
      }
      this.clearTimer = setTimeout(() =>{
        // 有值时才进行显示
        if(val){
          that.show = false;
        that.searchList=that.cityList.filter(item=>item.name.indexOf(val)!=-1||item.pinyin.indexOf(val)!=-1)
        }
      }, 200);

      
    },
    onCancel() {
      // this.$toast("取消");
      // 取消时也会执行onInput时间，加一层判断有值才显示
      this.show = true;
    },
  },
};
</script>

<style scoped lang="scss">
.popup{
  width: 80%;
  padding: 10%;
  text-align: center;
  button{
    margin-top: 20px;
    border: none;
    border-radius: 5px;
    background-color: skyblue;
  }
}
.city {
  display: flex;
  flex-direction: column;
  height: 100%;
  &-top-bar {
    flex-shrink: 0;
    height: 100px;
  }
  &-content {
    flex-grow: 1;
    overflow: auto;
    .hot-city-title {
      margin: 5px 0 5px 5px;
      font-size: 14px;
    }
    .hot-city {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: 12px;
      &-name {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #f4f4f4;
        margin: 10px 0 10px 15px;
        flex-shrink: 0;
      }
    }
  }
  .search-city{
    padding-left: 20px;
    &-item{
      padding: 5px;
      border-bottom: 1px solid rgb(244,244,244);
    }
  }
}
</style>